<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./lib/nprogress/nprogress.css">
    <link rel="stylesheet" href="./lib/bootstrap-validator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>Document</title>
</head>

<body>
    <div class="lt-index">
        <!-- 侧边栏 -->
        <div class="lt-sidebar">
            <a href="index.html" class="gohome">我想回家!!</a>
            <img src="./images/default.png" alt="">
            <p>超级管理员</p>
            <!-- 导航 -->
            <ul class="lt-nav">
                <li><span class="glyphicon glyphicon-user"> </span> <a href="user.html"> 用户管理</a></li>
                <li class="category">
                    <span class="glyphicon glyphicon-list"> </span><a href="#"> 分类管理</a>
                    <div class="child" style="padding:0;">
                        <a href="first.html" class="current" style="background-color: #1D1F21;
                            border-left: 3px solid #006699; display:block">一级分类</a>
                        <a href="second.html">二级分类</a>
                    </div>
                </li>
                <li><span class="glyphicon glyphicon-tags"> </span><a href="product.html"> 商品管理</a></li>
            </ul>
        </div>
        <div class="lt-subject">
            <!-- 头部 -->
            <div class="lt-header">
                <span class="glyphicon glyphicon-align-justify pull-left lt-menu"></span>
                <span class="glyphicon glyphicon-log-out pull-right" data-toggle="modal" data-target="#myModal"></span>

            </div>
            <!-- 主体 -->
            <!-- 下面的内容 -->
            <div class="container-fluid">
                <div class="lt-content">
                     <!-- 路径导航 -->
                <ol class="breadcrumb">
                        <li><a href="index.html">管理系统</a></li>
                        <li class="active">分类管理</li>
                        <li class="active">一级分类</li>
                    </ol>
                    <button type="button" class="btn btn-default" style="margin-bottom: 20px;outline: none; " id="addModal"
                        data-toggle="modal" data-target=".bs-example-modal-sm">
                        添加分类</button>
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th width="35%">序号</th>
                                <th width="65%">一级分类名</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 刨个坑 -->
                        </tbody>
                    </table>
                    <!-- 分页dom结构 -->
                    <div class="pull-right">
                        <ul id="paginator"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <!-- Small modal -->
    <div class="modal fade bs-example-modal-sm"  id="aaModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加分类</h4>
                </div>
                <div class="modal-body">
                    <form id="form">
                        <div class="form-group">
                            <input type="text" name="categoryName" id="category" class="form-control one"  placeholder="请输入一级分类" >
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" form="form">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 退出模态框 -->
<div class="modal fade" tabindex="-1" id="myModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">温馨提醒</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要退出吗</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary  lt-quit">退出</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

        <script type="text/html" id="tmp">
            {{ each rows v i }}
            <tr>
                <!-- 前面有多少页*一页多少条 + (i+1) -->
                <td>{{ (page-1)*size + i+1 }}</td>
                <td>{{ v.categoryName }}</td>
            </tr>
            {{ /each }}
        </script>

    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./lib/bootstrap-paginator/bootstrap-paginator.js"></script>
    <script src="./lib/nprogress/nprogress.js"></script>
    <script src="./lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
    <script src="./lib/artTemplate/template-web.js"></script>
    <script src="./js/isLogin.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/first.js"></script>
</body>

</html>